<template>
    <div>
        <web-header-new v-if="destination.fid == 1" show="outbound" />
        <web-header-new v-else show="domestic" />


        <el-affix :offset="140">
            <div class="sideNavLayer" @mouseleave="sideButLeave">
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(0)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_1.png" alt=""> 亚洲
                    </button>
                    <div v-show="sideShow == 0" class="navLayerTwo" @mouseenter="sideBut(0)" @mouseleave="sideButLeave">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['亚洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                        <!-- <div>聊天框小角标</div> -->
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(1)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_2.png" alt=""> 欧洲
                    </button>
                    <div v-show="sideShow == 1" class="navLayerTwo" @mouseenter="sideBut(1)" @mouseleave="sideButLeave"
                        style="width: 100px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['欧洲Two']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(3)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_4.png" alt=""> 大洋洲
                    </button>
                    <div v-show="sideShow == 3" class="navLayerTwo" @mouseenter="sideBut(3)" @mouseleave="sideButLeave"
                        style="width: 100px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['大洋洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(4)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_5.png" alt=""> 美洲
                    </button>
                    <div v-show="sideShow == 4" class="navLayerTwo" @mouseenter="sideBut(4)" @mouseleave="sideButLeave"
                        style="width: 100px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['美洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(5)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_6.png" alt=""> 海岛
                    </button>
                    <div v-show="sideShow == 5" class="navLayerTwo" @mouseenter="sideBut(5)" @mouseleave="sideButLeave"
                        style="width: 100px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['海岛']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(2)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_3.png" alt=""> 非洲
                    </button>
                    <div v-show="sideShow == 2" class="navLayerTwo" @mouseenter="sideBut(2)" @mouseleave="sideButLeave"
                        style="width: 120px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['非洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(6)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_7.png" alt=""> 西南
                    </button>
                    <div v-show="sideShow == 6" class="navLayerTwo" @mouseenter="sideBut(6)" @mouseleave="sideButLeave"
                        style="width: 72px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['西南']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(7)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_8.png" alt=""> 西北
                    </button>
                    <div v-show="sideShow == 7" class="navLayerTwo" @mouseenter="sideBut(7)" @mouseleave="sideButLeave"
                        style="width: 72px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['西北']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(8)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_9.png" alt=""> 华北
                    </button>
                    <div v-show="sideShow == 8" class="navLayerTwo" @mouseenter="sideBut(8)" @mouseleave="sideButLeave"
                        style="width: 72px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华北']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(9)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_10.png" alt=""> 华东
                    </button>
                    <div v-show="sideShow == 9" class="navLayerTwo" @mouseenter="sideBut(9)" @mouseleave="sideButLeave"
                        style="width: 72px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华东']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(10)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_11.png" alt=""> 华南
                    </button>
                    <div v-show="sideShow == 10" class="navLayerTwo" @mouseenter="sideBut(10)"
                        @mouseleave="sideButLeave" style="width: 72px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华南']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(11)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_12.png" alt=""> 华中
                    </button>
                    <div v-show="sideShow == 11" class="navLayerTwo" @mouseenter="sideBut(11)"
                        @mouseleave="sideButLeave" style="width: 72px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华中']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(12)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_13.png" alt=""> 东北
                    </button>
                    <div v-show="sideShow == 12" class="navLayerTwo" @mouseenter="sideBut(12)"
                        @mouseleave="sideButLeave" style="width: 82px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['东北']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">{{ rs.title }}</RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-affix>



        <div class="breadcrumb"> 您当前的位置：
            <router-link to="/" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">首页</router-link> &gt;
            <router-link to="/area" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">目的地</router-link>
            &gt;
            <template v-if="destination.fid == 1">
                <router-link to="/outbound">出境游</router-link> &gt;
            </template>
            <template v-else>
                <router-link to="/domestic">国内游</router-link> &gt;
            </template>
            <span>{{ destination.city }}旅游</span> &gt;
            <span>{{ destination.area }}旅游</span>
        </div>
        <div class="big_box">
            <aside>
                <!-- <div class="box_a">
                    <div class="top">{{ destination.city }}旅游</div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <div v-for="item in destination.mdd" :key="item">
                                    <RouterLink :to="`/line/${item.id}`" :title="`${destination.area}旅游`"
                                        :alt="`${destination.area}旅游`">
                                        {{ item.title }} </RouterLink>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div> -->
                <div class="box_c" @click="selectOpen()">
                    <ul>
                        <li><img :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`" id="btn-custom-size"
                                height="86" src="https://admin.hqx.com.cn/Public/App/image/dz_01.png" />
                        </li>
                        <div id="custom-size-dialogBox"></div>
                        <li><img :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`" id="btn-custom-size2"
                                height="86" src="https://admin.hqx.com.cn/Public/App/image/dz_02.png" />
                        </li>
                        <li><img :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`" id="btn-custom-size3"
                                height="86" src="https://admin.hqx.com.cn/Public/App/image/dz_03.png" />
                        </li>
                    </ul>
                </div>
                <div id="left3"></div>
                <!-- <el-affix :offset="140"> -->
                <div class="box_b left3 box_new">
                    <div class="box-new-name"> <img src="" alt=""> 热门推荐</div>
                    <div class="bottom">
                        <div v-for="item in recommendList" :key="item.id">
                            <router-link :to="`/details/${item.id}`" :title="`${destination.area}旅游`"
                                :alt="`${destination.area}旅游`">

                                <img :src="item.pic" alt="" class="box-new-img">
                                <div class="box-new-title clamp-line-2">{{ item.title }}{{ item.title }}</div>
                                <div style="padding-bottom: 2px;">
                                    <span style="font-weight:bold; color: #FF5454; font-size: 16px;">{{ item.price
                                    }}/人
                                        <span style="font-size: 10px; font-weight: 200;">起</span></span>
                                </div>

                            </router-link>
                            <!-- <dl>
                                    <dt>
                                        <RouterLink :to="`/details/${item.id}`" :title="`${destination.area}旅游`"
                                            :alt="`${destination.area}旅游`">
                                            <img :src="`${item.pic}`" class="img" />
                                        </RouterLink>
                                    </dt>
                                    <dd>
                                        <RouterLink :to="`/details/${item.id}`" :title="`${destination.area}旅游`"
                                            :alt="`${destination.area}旅游`" class="clamp-line-1 ">{{ item.title }}
                                        </RouterLink>
                                        <span color="#FF0000" style="font-weight:bold; color: red;">{{ item.price
                                            }}/人</span>起
                                    </dd>
                                </dl> -->
                        </div>
                    </div>
                </div>
                <!-- </el-affix> -->

                <div class="box_d" style="display:none">
                    <div class="top">旅游攻略指南</div>
                    <div class="bottom">
                        <ul>
                            <!-- <volist name="tjlist" id="rs">
                                <li class="t{$key+1}"><a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                        href="/guide/{$rs.id}.html">{$rs.title}</a></li>
                            </volist> -->
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="right_box">
                <div class="screen">
                    <div class="top">
                        <ul id="line_typeArr">
                            <li><a @click="changeList('line_type', '')" :class="data.line_type == '' ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">所有线路</a></li>
                            <li><a @click="changeList('line_type', 1)" :class="data.line_type == 1 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">跟团旅游</a></li>
                            <li><a @click="changeList('line_type', 2)" :class="data.line_type == 2 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">定制旅行</a></li>
                            <li><a @click="changeList('line_type', 5)" :class="data.line_type == 5 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">包团旅游</a></li>
                            <li><a @click="changeList('line_type', 3)" :class="data.line_type == 3 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">当地玩乐</a></li>
                        </ul>
                    </div>
                    <div class="bottom">
                        <!-- <dl>
                            <dt>目的地：</dt>
                            <dd id="playArr">
                                <RouterLink v-for="item in destination.mdd" :key="item.id" 
                                    :style="{ 'color': item.id == data.plays ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    :to="`/line/${item.id}`">{{
                                        item.title
                                    }}</RouterLink>
                            </dd>
                        </dl> -->
                        <ul class="screen-tabs">
                            <li style="width: 80px;"><span class="iconfont icon-yuandian1 dot"></span>目的地：</li>
                            <li id="playArr" v-for="item in destination.mdd" :key="item.id">
                                <RouterLink :style="{ 'color': item.id == data.plays ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    :to="`/line/${item.id}`">{{
                                        item.title
                                    }}</RouterLink>
                            </li>
                        </ul>


                        <!-- <dl>
                            <dt>主题特色：</dt>
                            <dd id="themeArr">
                                <a @click="changeList('theme', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>

                                <a v-for="item in destination.theme" :key="item.id"
                                    @click="changeList('theme', item.id)"
                                    :style="{ 'color': item.id == data.theme ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">{{
                                        item.title
                                    }}
                                </a>
                            </dd>
                        </dl> -->
                        <dl>
                            <dt><span class="iconfont icon-yuandian1 dot"></span>游玩天数：</dt>
                            <dd id="line_daysArr">
                                <a @click="changeList('days', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('days', 1)" :style="{ 'color': 1 == data.days ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1日游</a>
                                <a @click="changeList('days', 2)" :style="{ 'color': 2 == data.days ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">2-4天</a>
                                <a @click="changeList('days', 3)" :style="{ 'color': 3 == data.days ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">5-7天</a>
                                <a @click="changeList('days', 4)" :style="{ 'color': 4 == data.days ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">8-11天</a>
                                <a @click="changeList('days', 5)" :style="{ 'color': 5 == data.days ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">11天以上</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt><span class="iconfont icon-yuandian1 dot"></span>价格范围：</dt>
                            <dd id="priceArr">
                                <a @click="changeList('prices', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('prices', 1)"
                                    :style="{ 'color': 1 == data.prices ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1000元以下</a>
                                <a @click="changeList('prices', 2)"
                                    :style="{ 'color': 2 == data.prices ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1000-3000元</a>
                                <a @click="changeList('prices', 3)"
                                    :style="{ 'color': 3 == data.prices ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">3000-5000元</a>
                                <a @click="changeList('prices', 4)"
                                    :style="{ 'color': 4 == data.prices ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">5000-1万元</a>
                                <a @click="changeList('prices', 5)"
                                    :style="{ 'color': 5 == data.prices ? '#007AFF' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1万元以上</a>
                                <!-- <a @click="changeList('prices', 5)" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">7000-1万元</a> -->
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="orders">
                    <div class="title">综合排序：</div>
                    <ul id="orderArr">
                        <li class="t1">

                            <a v-if="data.order != 1 && data.order != 2" @click="changeList('order', 2)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 2" @click="changeList('order', 1)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 1" @click="changeList('order', 2)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                        </li>
                        <li class="t2">
                            <!-- <a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a> -->
                            <a v-if="data.order != 3 && data.order != 4" @click="changeList('order', 4)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 4" @click="changeList('order', 3)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 3" @click="changeList('order', 4)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                        </li>
                        <li class="t3">
                            <!-- <a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a> -->
                            <a v-if="data.order != 5 && data.order != 6" @click="changeList('order', 6)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 6" @click="changeList('order', 5)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 5" @click="changeList('order', 6)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                        </li>
                        <li class="t4">
                            <!-- <a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a> -->
                            <a v-if="data.order != 7 && data.order != 8" @click="changeList('order', 8)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 8" @click="changeList('order', 7)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 7" @click="changeList('order', 8)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                        </li>
                    </ul>
                    <!-- <div class="nums">共发现 <strong>{$rows}</strong> 个宝贝！</div> -->
                </div>
                <div class="line_box" id="bigbox">
                    <div v-for="item in list" :key="item.id">
                        <lineItem :item='item'></lineItem>
                    </div>
                </div>
                <div class="page_a" @click="getList"> <a :title="destination.city + '旅游'" :alt="destination.city + '旅游'"
                        href="javascript:void(0)">
                        <div></div> {{ moreText }}
                    </a> </div>
            </div>
        </div>
        <new-footer></new-footer>
        <back-top />
        <popup-consult ref="RefChild"></popup-consult>

        <!-- 弹窗 -->
        <!-- 私人定制 -->
        <!-- 团队定制 -->
    </div>
</template>

<script setup>
import webHeaderNew from "@/components/general/HeaderNew.vue";

import { area_details, line_items, area_Destination, theme_itemsByArea, connect_items } from "@/api/travel";
import { ref, reactive, onBeforeMount, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute, RouterLink } from 'vue-router';
import lineItem from '@/components/list-item/lineItem.vue'
// 字典
import lineForeign from '@/assets/dictionaries/lineAreasForeign.js';
import lineDomestic from '@/assets/dictionaries/lineAreasDomestic.js';

const route = useRoute()
let fullPath = route.fullPath; // 保存当前路径
let data = ref({
    area: route.params.area,//目的地
    line_type: '', //出游方式
    theme: '',
    plays: '', //玩法
    prices: '', //价格范围
    days: '',
    order: '', // 排序
    page: 1,
    limit: 10,
});
let list = ref([]);


let destination = ref({ fid: 1 }); // 所有信息 
let moreText = ref('展开更多精彩体验') // 展开更多
let recommendList = ref([]); // 推荐


// 获取子组件的引用
const RefChild = ref();

const selectOpen = () => {
    if (RefChild.value) {
        RefChild.value.open();
    }
}

let sideShow = ref(-1)
const sideBut = (index) => {
    sideShow.value = index;
}
const sideButLeave = () => {
    sideShow.value = -1;

}


// 初始化 
const initialize = async () => {
    fullPath = route.fullPath; // 保存当前路径
    // 初始化数据
    data.value = {
        area: route.params.area,//目的地
        line_type: '', //出游方式
        theme: '',
        plays: '', //玩法
        prices: '', //价格范围
        days: '',
        order: '', // 排序
        page: 1,
        limit: 10,
    };
    list.value = [];
    moreText.value = '展开更多精彩体验';
    // 重新请求
    let res = await area_Destination({ id: route.params.area }); // 得到目的地区域父级信息
    let area = await area_details({ id: route.params.area }); // 得到区域信息
    destination.value = res.data;
    destination.value.city = res.data.title;
    destination.value.area = area.data.title;

    document.title = `${destination.value.area}旅游,去${destination.value.area}旅游要多少钱,${destination.value.area}旅游线路报价,环球行官网`;
    // 请求主题
    let theme = await theme_itemsByArea({ area: data.value.area }); // 得到目的地区域父级信息
    destination.value.theme = theme.data;
    // 请求玩法
    let connect = await connect_items({ ids: destination.value.areas }); // 得到目的地区域父级信息
    destination.value.connect = connect.data;

    // 初始化列表
    await getList();

    // 获取推荐列表
    let res2 = await line_items({ des: destination.value.id, limit: 4 });
    recommendList.value = res2.data;


}



// 翻页 持续获取list数据
const getList = async () => {
    if (moreText.value == '没有更多了') {
        return;
    }
    let res = await line_items(data.value);
    list.value = [...list.value, ...res.data];
    data.value.page++;
    if (res.data.length == 0) {
        moreText.value = '没有更多了';
    }
}

// 改变data.value时切换列表
const anewList = async () => {
    let res = await line_items(data.value);
    list.value = [...res.data];
    data.value.page = 2;
    moreText.value = res.data.length == 0 ? '没有更多了' : '展开更多精彩体验';
}


// data值改变
const changeList = (key, value) => {
    switch (key) {
        case 'line_type':
            data.value.line_type = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'theme':
            data.value.theme = value;
            break;
        case 'plays':
            data.value.plays = value;
            break;
        case 'prices':
            data.value.prices = value;
            break;
        case 'days':
            data.value.days = value;
            break;
        case 'order':
            data.value.order = value;
            break;
        default:
            break;
    }
    data.value.page = 1;
    anewList();
}


onMounted(async () => {
    initialize();
    // areasDomestic
    // areasForeign

});


</script>

<style lang="scss" scoped>
@import "../../css/main_line_listNew.css";
</style>
